import React from 'react';
import {
  Box,
  Avatar,
  Typography,
  Button,
  LinearProgress,
  Stack,
  IconButton,
} from '@mui/material';
import EditIcon from '@mui/icons-material/Edit';
import { styled } from '@mui/material/styles';

const ProfileAvatar = styled(Avatar)(({ theme }) => ({
  width: theme.spacing(15),
  height: theme.spacing(15),
  border: `4px solid ${theme.palette.primary.main}`,
  boxShadow: theme.shadows[3],
}));

const LevelProgress = styled(LinearProgress)(({ theme }) => ({
  height: 8,
  borderRadius: 4,
  width: '100%',
  maxWidth: 200,
}));

interface ProfileHeaderProps {
  user: {
    name: string;
    avatar: string;
    level: number;
    exp: number;
    nextLevelExp: number;
    joinDate: string;
    bio: string;
  };
  onEdit: () => void;
}

const ProfileHeader: React.FC<ProfileHeaderProps> = ({ user, onEdit }) => {
  const expPercentage = (user.exp / user.nextLevelExp) * 100;

  return (
    <Box
      sx={{
        position: 'relative',
        bgcolor: 'background.paper',
        borderRadius: 2,
        p: 4,
        mb: 4,
      }}
    >
      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        spacing={4}
        alignItems="center"
      >
        <Box sx={{ position: 'relative' }}>
          <ProfileAvatar src={user.avatar} alt={user.name} />
          <IconButton
            size="small"
            sx={{
              position: 'absolute',
              right: 0,
              bottom: 0,
              bgcolor: 'background.paper',
              '&:hover': { bgcolor: 'action.hover' },
            }}
            onClick={onEdit}
          >
            <EditIcon fontSize="small" />
          </IconButton>
        </Box>

        <Box sx={{ flex: 1 }}>
          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
            <Typography variant="h4" component="h1">
              {user.name}
            </Typography>
            <Button
              variant="outlined"
              size="small"
              startIcon={<EditIcon />}
              onClick={onEdit}
            >
              编辑资料
            </Button>
          </Box>

          <Typography color="text.secondary" sx={{ mb: 2 }}>
            {user.bio}
          </Typography>

          <Box sx={{ mb: 2 }}>
            <Typography variant="body2" color="text.secondary" gutterBottom>
              等级 {user.level}
            </Typography>
            <Stack direction="row" spacing={1} alignItems="center">
              <LevelProgress
                variant="determinate"
                value={expPercentage}
                color="primary"
              />
              <Typography variant="caption" color="text.secondary">
                {user.exp}/{user.nextLevelExp}
              </Typography>
            </Stack>
          </Box>

          <Typography variant="body2" color="text.secondary">
            加入时间：{user.joinDate}
          </Typography>
        </Box>
      </Stack>
    </Box>
  );
};

export default ProfileHeader;
